<template>
	
	<view>
		<!-- vue2的写法，全部要写在一个div内，这里要把东西写在一个view内，不然会报错 -->
		 <!-- 渲染轮播图，轮播图设定 -->
		<swiper indicator-dots="true" indicator-color="#117FAF" indicator-active-color="#040402" circular="true" autoplay="true" interval="2000" duration="1000">
			 <!-- 遍历后台获取的数据 -->
			<swiper-item v-for="(item,index) of swiperList" :key="item.goods_id">
				<!-- vue动态绑定数据src前面要加冒号：不要与微信用法混乱 -->
				<navigator :url="'/subpkg/goods_detail/goods_detail?id='+item.goods_id">
					<!-- 动态绑定url -->
					<image :src="item.image_src" mode="widthFix"></image>
				</navigator>
				
			</swiper-item>
		</swiper>
		
		<!-- 九宫格分类导航区域 -->
		 <view class="gridOutBox" > <!--循环不要写在最外层，不然样式写不对 -->
			<!-- 因为点击到不同的页面，所以这里不用navigator标签，而用编程式写条件跳转 -->
			<!-- <navigator url="/pages/cate/cate" open-type="switchTab"> -->
			<view class="gridInnerBox" v-for="(item,index) of gridList" :key="index" @click="switchCate(item)">
				<image :src="item.image_src" mode="widthFix"></image>
				
				<!-- <text>{{item.name}}</text> 图片底下已经包含有文字所以不需要单独加文字-->
			</view>	
			
			<!-- </navigator> -->
		</view>
		
		<!-- 楼层区域布局 -->
		<view class="floorOutBox" v-for="(item,index) of floorList" :key="item.goods_id">
			<!-- 楼层标题图布局 用网络请求的数据据遍历出标题图片-->
				<view class="titleBox">
					<image :src="item.floor_title.image_src" mode="widthFix"></image>
				</view>
				<!-- 楼层5张图片布局 -->
				<view class="floorFiveBox">
					<!-- 遍历出楼层左边的单张图片 -->
					<navigator class="floorLeftPic" :url="item.product_list[0].url">
						<image :src="item.product_list[0].image_src" mode="widthFix"></image>
					</navigator>
					<!-- 再遍历一遍,获得楼层右边的4张图片 -->
					<view class="floorRightPic" >
						<navigator v-for="(item2,index2) of item.product_list" :key="index" v-if="index2 != 0" :url="item2.url">
							<image :src="item2.image_src" mode="widthFix"></image>
						</navigator>
						
						<!-- <image :src="item.product_list[1].image_src" mode="widthFix"></image>
						<image :src="item.product_list[2].image_src" mode="widthFix"></image>
						<image :src="item.product_list[3].image_src" mode="widthFix"></image>
						<image :src="item.product_list[4].image_src" mode="widthFix"></image> -->
					</view>
				</view>
	
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[] ,//定义接收轮播图的空数组
				gridList:[] ,//定义接收九宫格的空数组
				floorList:[] //定义接收楼层区域的空数组
			};
		},
		methods: {
			//用promise的方法申请网络请求,得到轮播图的数据(promise不用下载什么包吗？？)
			async getSwiperList(){
				//发起请求
				const res=await uni.$http.get('/api/public/v1/home/swiperdata')
				//请求失败返回的报错用showToast，showToast可以在utils全局设定一个共有方法再导入
				console.log(res)
				//请求失败后用showToast提示加载失败
				// if(res.data.meta.status !=200){
				// 	uni.showToast({
				// 		title:"加载失败了",
				// 		icon:"none"
				// 	})
				// }
				// 使用全局封装方法
				if(res.data.meta.status !=200){
					uni.$showPopUp()
				}
				this.swiperList=res.data.message
			},
			//用promise申请网络请求九宫格数据
			async getGrid(){
				const res=await uni.$http.get("/api/public/v1/home/catitems")
				console.log(res)
				if(res.data.meta.status !=200){
					uni.$showPopUp()
				}
				this.gridList=res.data.message
			},
			//分类导航：编程式+条件跳转，用if条件判断点击的是哪个图标类目进而触发点击事件
			switchCate(item){
				if(item.name=="分类"){
					uni.switchTab({
						url:"/pages/cate/cate"
					})
				}
			},
			//用promise申请楼层区域数据
			async getFloor(){
				const res=await uni.$http.get("/api/public/v1/home/floordata")
				console.log(res)
				if(res.data.meta.status !=200){
					uni.$showPopUp()
				}
				
			//处理后台url，因为我们用了分包subpkg，导致路径跟后台提供的url路径不同
			// 所以用方法1去改变后台地址
			// 方法2：可以找后台商量改地址
			// 方法3：不写分包.但是写分包可以使项目更清晰，轻便
				
				res.data.message.forEach(floor=>{
					floor.product_list.forEach(prod=>{
						prod.url="/subpkg/goods_list/goods_list?"+prod.navigator_url.split("?")[1]
					})
				})	
					
				this.floorList=res.data.message
			},
		
			
		
		},
		onLoad(){
			// 加载时触发获得轮播图数据
			this.getSwiperList()
			// 加载时触发获得九宫格图数据
			this.getGrid()
			// 加载时触发获得楼层图数据
			this.getFloor()
		}
	}
</script>

<style lang="scss">
.gridOutBox{
	display: flex;
	flex-flow: row nowrap;
	padding:10rpx 0 30rpx 0;
	// justify-content:space-around;
	// border: 1px solid red;
	// box-sizing: border-box;
	
	.gridInnerBox{
		display: flex;
		justify-content: space-around;
		width:25%;
		// border: 1px solid green;
	}
	image{
		width: 80%;
		}
	}

	.floorFiveBox{
		display: flex;
		flex-flow: row nowrap;
	    margin-bottom: 20rpx;
		
		.floorLeftPic{
			width: 30%;
			image{
				width: 232rpx;
			}
		}
		.floorRightPic{
			width: 70%;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-around;
				
			image{
				width: 233rpx;
			}
		}
		
	}

</style>
